<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>时钟与计算器</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <!-- 左侧：时钟区域 -->
    <div class="clock-section">
      <!-- 模拟时钟 -->
      <div class="analog-clock">
        <div class="clock-face">
          <div class="hand hour-hand"></div>
          <div class="hand min-hand"></div>
          <div class="hand sec-hand"></div>
        </div>
      </div>
      <!-- 数字时钟 -->
      <div class="digital-clock">
        <p id="time">--:--:--</p >
        <p id="date">----</p >
      </div>
    </div>

    <!-- 右侧：计算器区域 -->
    <div class="calculator-section">
      <input type="text" id="calc-display" readonly placeholder="0" />
      <div class="calc-buttons">
        <button class="btn" data-value="7">7</button>
        <button class="btn" data-value="8">8</button>
        <button class="btn" data-value="9">9</button>
        <button class="btn operator" data-value="/">÷</button>
        
        <button class="btn" data-value="4">4</button>
        <button class="btn" data-value="5">5</button>
        <button class="btn" data-value="6">6</button>
        <button class="btn operator" data-value="*">×</button>
        
        <button class="btn" data-value="3">3</button>
        <button class="btn" data-value="2">2</button>
        <button class="btn" data-value="1">1</button>
        <button class="btn operator" data-value="-">-</button>
        
        <button class="btn" data-value="0">0</button>
        <button class="btn" data-value=".">.</button>
        <button class="btn operator" data-value="C">C</button>
        <button class="btn operator" data-value="+">+</button>
        
        <button class="btn operator equal" data-value="=">=</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>